<template>
    <div class="DatabaseBackup overflowY">
      <!-- <div class="PageTitle"><i class="iconfont icon-jia"></i>数据库备份与监控</div> -->
      <div class="PageContent">
         
        <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="180px" class="demo-ruleForm">
           <div class="PageItem">
          <el-col :span="12">
            <el-row class="PageInfo"><i class="info-bar"></i>数据库自动备份信息(上次页面刷新时间2019-04-22 15：15：00)</el-row>
            <el-row :gutter="10" class="padding5vw">
              <el-form-item  label="MYSQL：代理服务状态：" prop="name">
                <span v-model="ruleForm.name"  style="display: inline-block;width: 15vw;min-width: 150px;">尚未启动</span>
              </el-form-item>
              <el-form-item  label="" prop="name">
                <el-button type="primary" v-if="btnRight.btnDatabaseBackupMysqlStart" @click="TotalMoney">启动</el-button>
                <el-button type="primary" v-if="btnRight.btnDatabaseBackupMysqlRefresh" @click="NowPay">刷新</el-button>
              </el-form-item>
            </el-row>
            <el-row :gutter="10" class="padding5vw">
              <el-form-item  label="要监控的备份文件夹：" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item  label="" prop="name">
                <el-button type="primary"  v-if="btnRight.btnDatabaseBackupFileSelect" @click="NowPay">选择</el-button>
              </el-form-item>
            </el-row>
            <el-row :gutter="10" class="padding5vw">
              <el-form-item  label="磁盘占用情况：" prop="name">
                <span v-model="ruleForm.name" style="display: inline-block;width:120px;">D盘</span>
              </el-form-item>
            </el-row>


            <el-row class="PageInfo"><i class="info-bar"></i>手动备份</el-row>
            <el-row :gutter="10" class="padding5vw">
              <el-form-item  label="要备份的数据库名称：" prop="name">
                <el-input v-model="ruleForm.name" disabled></el-input>
              </el-form-item>
            </el-row>
            <el-row :gutter="10" class="padding5vw">
              <el-form-item  label="手动备份文件存放位置：" prop="name">
                <el-input v-model="ruleForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item  label="" prop="name">
                <el-button type="primary"  v-if="btnRight.btnDatabaseBackupBackByHand" @click="NowPay">手动备份</el-button>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div :gutter="10" class="kongjian">
              <div id="kongjian" class="className" style="height:20vw;width:25vw" />
            </div>
          </el-col>
          <el-row class="PageInfo" style="clear: both;"><i class="info-bar"></i>备份文件列表 <el-button type="primary" style="margin-left: 14px;" v-if="btnRight.btnDatabaseBackupListRefresh" @click="NowPay">刷新</el-button></el-row>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="文件名称"
              width="300">
            </el-table-column>
            <el-table-column
              prop="name"
              label="文件完整路径"
              width="300">
            </el-table-column>
            <el-table-column
              prop="address"
              label="文件创建时间"
              width="300">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="300">
            </el-table-column>
          </el-table>
          </div>
        </el-form>
      </div>
    </div>
</template>

<script>
  import echarts from 'echarts'
    export default {
        name: "DatabaseBackup",
      data(){
          return{
            chart: null,
            ruleForm:{
              name:'dddd'
            },
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }], //按钮权限
            btnRight: {
              btnDatabaseBackupMysqlStart: true, //数据备份启动
              btnDatabaseBackupMysqlRefresh: true,//数据备份刷新
              btnDatabaseBackupFileSelect: true,//文件选择
              btnDatabaseBackupBackByHand: true,//手动备份
              btnDatabaseBackupListRefresh: true,//列表刷新
            }
          }
      },
      mounted() {
        this.initChart()
        //按钮权限
        this.btnRight = this.$route.meta.buttons;
        //遍历属性赋值将true与false字符串转换成布尔型的值
        for (let key of Object.keys(this.btnRight)) {
          this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
        }
      },
      beforeDestroy() {
        if (!this.chart) {
          return
        }
        this.chart.dispose()
        this.chart = null
      },
      methods: {
        initChart() {
          this.chart = echarts.init(document.getElementById('kongjian'))
           var option = {
            title : {
              text: 'D盘占用空间统计',
              // subtext: '纯属虚构',
              x:'center'
            },
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['已占有','未占用']
            },
            series : [
              {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data:[
                  {value:335, name:'已占有'},
                  {value:310, name:'未占用'}
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(255, 255, 0, 0.5)'
                  }
                }
              }
            ]
          };

          this.chart.setOption(option);
        }
      }
    }
</script>

<style scoped>
  .DatabaseBackup{
    height: 100%;
  }
  .DatabaseBackup .PageContent .el-input,.DatabaseBackup .PageContent .el-select{
    width: 15vw;
    min-width: 150px;
  }
</style>
